
import { FormItemRule, ElTable } from 'element-plus'
import { Component } from './enums'

type TimeFormat = 'YYYY-MM-DD HH:mm:ss' | 'YYYY-MM-DD HH:mm' | 'YYYY-MM-DD' | 'YYYY-MM' | 'MM-DD' | 'YYYY/MM/DD HH:mm:ss' | 'YYYY/MM/DD HH:mm' | 'YYYY/MM/DD' | 'YYYY/MM' | 'MM/DD' | 'YYYY年MM月DD日 HH时mm分ss秒' | 'YYYY年MM月DD日 HH时mm分' | 'YYYY年MM月DD日' | 'YYYY年MM月' | 'MM月DD日'

export interface FormOption {
    type: Component
    mode?: string | string[]
    prop: string
    label: string
    span?: number
    labelWidth: number
    required?: boolean | (() => boolean)
    show?: boolean | (() => boolean)
    rules: FormItemRule[]
    config?
    element?: {
        placeholder?: string
        disabled?: boolean | (() => boolean)
        clearable?: boolean
    },
    events?
}

export interface TextFormOption extends FormOption {
    reflect?: string
    format?: TimeFormat
}

/**
 * xkl-form 的表单项
 * @prop 表单项英文名
 * @label 表单项中文名
 * @type 表单项组件类型
 * @show 表单项是否显示
 * @disabled 表单项是否禁用
 * @required 表单项是否必传
 * @rules 表单项校验规则参照element-plus
 */
export interface FormItem {
    prop: string
    label: string
    type: Component
    span: number
    labelWidth: number
    show: () => boolean
    key: () => string
    disabled: () => boolean
    required: () => boolean
    rules?: FormItemRule[]
    refRules: any
    mode?: string | string[]
    element?: any
    events?: any
    list?: any[]
    config?: any
    query?: QueryFeild
    search?: QueryFeild
    reflect?: string
}

/**
 * xkl-form 的表单项的输入规范
 * @prop 表单项key
 * @show 表单项是否显示
 * @disabled 表单项是否禁用
 * @required 表单项是否必传
 * @rules 表单项校验规则参照element-plus
 */
export interface Feild extends FormItem {
    prop?: string
    span?: number
    labelWidth?: number
    key?: () => string
    show?: () => boolean
    disabled?: () => boolean
    required?: () => boolean
    rules?: FormItemRule[]
    refRules?: any
}

export interface QueryFeild extends Feild {
    label?: string
    type?: string
}

/**
 * 表格列通用配置
 * mode 模式匹配
 * span 全局span
 * collapsible 是否可展开收起
 * placeholder 是否显示placeholder
 * labelWidth 全局labelWidth
 * events 注册事件
 */
export interface EntityOptions {
    name?: string
    mode?: string | string[]
    span?: number
    collapsible?: boolean
    queryVisible?: boolean
    placeholder?: boolean
    labelWidth?: number
    forceAlignLeft?: boolean //only for XklFormInfo
    events?: any
    element?: FormElement
}

export interface FormElement {
    labelPosition?: 'left' | 'right' | 'top'
    hideRequiredAsterisk?: boolean
    requireAsteriskPosition?: 'left' | 'right'
    showMessage?: boolean
    inlineMessage?: boolean
    statusIcon?: boolean
    size?: '' | 'large' | 'default' | 'small'
    disabled?: boolean
    scrollToError?: boolean
}

export interface TableColumnElement {
    showOverflowTooltip?: boolean
    sortable: boolean | 'custom'
    resizable?: boolean
    className?: string
    labelClassName?: string
    width?: number
    minWidth?: number
    type?: 'selection' | 'index' | 'expand'
    fixed?: 'left' | 'right' | boolean
}

/**
 * 表格列通用配置
 * @id 列的唯一标识id
 * @key 列的唯一标识key
 * @prop 列绑定字段
 * @label 列标题
 * @dict 该列对应的数据字典
 * @width 列宽度
 * @sortable 列排序
 * @reflect 优先显示reflect指向的字段
 * @align 列的对齐方式
 * @tags 该列可以以tag的形式展示
 * @format 用于处理时间格式
 * @element 对应el-table-column的属性
 * @extra 一些额外的配置，灵活拓展
 */
export interface TableColumn<T> {
    id?: string | number
    key?: string | number
    prop: keyof T
    label: string
    dict?: string
    width?: number | string
    reflect?: string
    align?: 'left' | 'center' | 'right'
    tags?: { type: 'primary' | 'success' | 'info' | 'warning' | 'danger', value: string | number }[]
    format?: TimeFormat
    element?: TableColumnElement
    extra?: { [prop: string]: string | number | boolean }
}

export interface LocalMenu {
    label: string
    value: string
    disabled?: boolean
    children?: LocalMenu[]
}

export interface SideMenu {
    id?: string
    path: string
    name: string
    title: string
    component: string
    type?: 'folder' | 'file'
    icon?: string
    fullPath?: string
    fullName?: string
    meta?: {
        title?: string
        keepAlive?: boolean
    }
    children?: SideMenu[]
}

export interface SelectItem {
    id?: string | number
    label: string
    value: string | number | string[] | number[] | boolean | boolean[]
}

export interface Attachment {
    id?: string
    name: string
    url: string
}

export interface BaseElement {
    clearable?: boolean
    placeholder?: string
    readonly?: boolean
    disabled?: boolean | (() => boolean)
    size?: 'small' | 'large'
}

export interface InputElement extends BaseElement {
    maxlength?: number
    minlength?: number
    type?: 'password' | 'text'
    change?: () => void
}

export interface InputNumberElement extends BaseElement {
    min?: number
    max?: number
    step?: number
    stepStrictly?: boolean
    precision?: number
    controls?: boolean
    controlsPosition?: '' | 'right'
}

export interface TextareaElement extends InputElement {
    rows?: number
    autosize?: boolean | { minRows?: number, maxRows?: number }
}

export interface SelectElement extends BaseElement {
    multiple?: boolean
    collapseTags?: boolean
    filterable?: boolean
    allowCreate?: boolean
    remote?: boolean
    filterMethod?: () => void
    remoteMethod?: () => void
    placement?: 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end'
}

export interface TreeSelectElement {
    showCheckbox?: boolean
    multiple?: boolean
    collapseTags?: boolean
    checkStrictly?: boolean
}

export interface DatePickerElement extends BaseElement {
    type?: 'year' | 'month' | 'date' | 'dates' | 'datetime' | 'week' | 'datetimerange' | 'daterange' | 'monthrange'
    format?: string
    valueFormat?: string
    rangeSeparator?: string
    func?: 'bottomshortcut'
}

export type TableRef = InstanceType<typeof ElTable>

export interface XklConfig {
    base: {
        dict_api_url: string
        auth_api?: string
        auth_token_key?: string
        successCodes: (string | number)[]
        warningCodes: (string | number)[]
        failedCodes: (string | number)[]
    },
    components: {
        button?: {}
        form?: {
            element?: FormElement
        }
        formInfo?: {}
        dict?: {
            filterable?: boolean
        }
        select?: {
            filterable?: boolean
        }
        treeSelect?: {}
        table?: {
            headerCellStyle?: {}
            element?: {
                tooltipOptions?: {
                    placement?: 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end',
                    popperClass?: string
                    effect?: 'dark' | 'light'
                    appendTo?: string
                }
            }
            defaultAlignment?: 'left' | 'right' | 'center'
        },
        upload?: {}
        datePicker?: {}
    },
    panel: {

    }
}


export interface BaseComponent {
    label: string
    mode?: string | string[]
    span?: number
    required?: boolean | (() => boolean)
    show?: boolean | (() => boolean)
    element?: {
        placeholder?: string
    }
}


export interface SelectEvents {
    loaded?: (list: any[], update: (list: any[]) => void) => void
    change?: (val: number | string | (number | string)[]) => void
    itemChange?: (val: any) => void
    clear?: () => void
    blur?: (event: FocusEvent) => void
    focus?: (event: FocusEvent) => void
    visibleChange?: (visible: boolean) => void
    removeTag?: (tagValue: (number | string)[]) => void
}